<template>
  <div class="livingDetails">
    <!-- 购物车商品 -->

    <div class="living-item">
        <div class="item-top">
            <div class="top-right">
                <div class="top-right-img">
                    <img class="auto-img" src="	https://img2.baidu.com/it/u=46579649,821546474&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" alt="">
                </div>
                <div class="top-right-content">360官方自营</div>
                <div class="top-right-right">领劵</div>
            </div>
        </div>
        <div class="itme-right">
            <div class="right-input">
                <input name="checkbox" value="Item 1" @click="roder" type="checkbox" class="tui-checkbox" :checked="pro.chebox" />
            </div>
            <div class="right-img">
                <img class="auto-img" :src="pro.img" alt="">
            </div>

            <div class="right-box">
                <div class="right-name">{{pro.name}}</div>
                <div class="ClassName">分类:{{pro.type}}</div>
                <div class="right-price">
                    <div class="price">&yen;{{pro.currentPrice}}</div>
                    <div class="price-right">
                        <van-stepper v-model="value" />
                    </div>
                </div>
            </div>

        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LivingDetails",
  
  props:{
    pro:{
        type:Object,
        default:""
    },
  
  },
  data() {
    return {
        //步进器
        value:0
    }
  },
  methods:{
    roder(){
        console.log(123);
    }
  }
};
</script>
 
<style lang="scss" scoped>
.price-right{
    width: 100px;
    margin-left: auto;
}
.price{
    font-size: 16px;
    color: red;
    font-weight: bold;
}
.right-box{
    position: relative;
}
.right-price{
    display: flex;
    position: absolute;
    bottom: 0;
    width: 200px;
}
.ClassName{
    margin-top: 10px;
    font-size: 14px;
    color: #999;
}

.right-name{
    margin-top: 5px;
    font-size: 14px;
    width: 200px;
    max-height: 40px;
}
.right-img{
    height: 100px;
    width: 100px;
    margin-top: 5px;
    margin-left: 10px;
    border: 1px solid rgb(213, 212, 212);
    margin-right: 10px;
}
.right-input{
    margin-top: 42px;
}
.top-right-right{
    margin-left: auto;
    font-size: 16px;
    line-height: 27px;
    
}
.item-top{
    display: flex;
    width: 100%;
}
.top-right{
    height: 30px;
    display: flex;
    width: 100%;
    // margin-left: 20px;
    // justify-content: center;
    .top-right-content{
        font-size: 16px;
        margin-left: 10px;
        font-weight: bold;
        line-height: 27px;
    }

}
.top-right-img{
        width: 20px;
        height: 20px;
        margin-top: 3px;
    }
.living-item{
    border-radius: 10px;

}
.livingDetails{
    padding: 10px;
}

.itme-right{
    width: 100%;
    height: 110px;
    margin-top: 10px;
    border: 1px solid white;
    display: flex;
}

//设置选中背景
.tui-checkbox:checked {
  background: #1673ff;
}
//设置复选框样式
.tui-checkbox {
  width: 23px;
  height: 23px;
  background-color: #ffffff;
  border: solid 2px #cacaca;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-transition: background-color ease 0.1s;
  transition: background-color ease 0.1s;
}
//设置伪类，即显现的对勾样式
.tui-checkbox:checked::after {
  content: "";
  top: 5px;
  left: 5px;
  position: absolute;
  background: transparent;
  border: #fff solid 2px;
  border-top: none;
  border-right: none;
  height: 6px;
  width: 10px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.living-item {
    background-color: white;
}
</style>